<script setup>
import CommonHead from "@/layout/CommonHead.vue"
import CommonAside from "@/layout/CommonAside.vue"
import request from "@/net/request.js";
import {onMounted, reactive, ref,} from "vue";
import { options } from "@/components/OutStore/options.js";
import {ElNotification } from 'element-plus';
import {Delete,Search,Plus,Edit,Refresh} from '@element-plus/icons-vue'
const state = reactive({
    tableData: [],
    form: {
        outId: '',
        outDate: '',
        outCount: '',
        outTon: '',
        outStoreId: '',
        outCost: 0.0,
        createName: ''
    },
    delorget: {
        outId: ''
    }
})
const reset = () => {
        state.form.outId = ''
        state.form.outDate = ''
        state.form.outCount = ''
        state.form.outTon = ''
        state.form.outStoreId = ''
        state.form.outCost = 0.0
        state.form.createName = ''
    }

onMounted(() => {

    outStoreFind()

    })

    const tmp = []
    const outStoreFind = () => {
        request.get("/OutStore/find").then(res => {
           state.tableData = res.data
        })        

    }

    const outStoreDel = () => {
        request.post("/OutStore/delete",state.delorget).then(res => {
            if (res.status === '200') {
              ElNotification({
                type: 'success',
                message: res.msg
              })
              outStoreFind()
            }
            else ElNotification({
              type: 'error',
              message: res.msg
            })
        })
    }
    
    const outStoreAdd = () => {
      if(state.form.outId != ''){
        request.post("/OutStore/add",state.form).then(res => {
        if (res.status === '200'&&state.form.outId != ''){
          ElNotification({
              type: 'success',
              message: res.msg
          })
          outStoreFind()
        }
        else ElNotification({
              type: 'error',
              message: res.msg
            })
      })
      }
      else{
        ElNotification({
          type: 'error',
          message:'出库失败，单号不能为空'
        })
      }
      
    }


    // const outStoreModify = () => {
    //   request.post("/OutStore/modify",state.form).then(res => {
    //     if(res.status === '200'){
    //       ElNotification({
    //         type: 'success',
    //         message: res.msg
    //       })
    //       outStoreFind()
    //     }
    //     else{
    //       ElNotification({
    //         type: 'error',
    //         message: res.msg
    //       })
    //     }
    //   })
    // }


    const outStoreGet = () => {
        if(state.delorget.outId === ''){
            outStoreFind()
        }
        else{
            request.post("/OutStore/get",state.delorget).then(res => {
            if(res.status === '200'){
                ElNotification({
                    type: 'success',
                    message: res.msg
                })
                state.tableData = res.data
            }else{
                ElNotification({
                type: 'error',
                message: res.msg
                })
            }
            })
            }
        
    }
</script>


<template>
    <el-container style="height: 100%">
      <el-aside width="auto">
        <CommonAside/>
      </el-aside>
      <el-container>
        <el-header>
          <CommonHead/>
        </el-header>
        <el-main>
          <el-card shadow="never">
            <el-row :gutter="20">
              <el-col :span="3">
                <el-input placeholder="出库单号" v-model.trim="state.form.outId" clearable></el-input>
              </el-col>
              <el-col :span="5">
                <el-config-provider :locale="locale">
                  <el-date-picker
                      v-model.trim="state.form.outDate"
                      tpye="date"
                      placeholder="请选择出库日期"
                      :size="size"
                      value-format="YYYY-MM-DD HH:mm:ss"
                  />
                </el-config-provider>
              </el-col>
              <el-col :span="2">
                <el-input placeholder="出库吨数" v-model.trim="state.form.outTon"
                          oninput="value=value.replace(/[^\d.]/g, '')" clearable></el-input>
              </el-col>
              <el-col :span="2">
                <el-input placeholder="出库件数" v-model="state.form.outCount"
                          oninput="value=value.replace(/\D/g,'')" clearable></el-input>
              </el-col>
              <el-col :span="3">
                <el-input placeholder="取货仓库ID" v-model.trim="state.form.outStoreId" clearable></el-input>
              </el-col>
              <el-col :span="3">
                <el-input placeholder="创建人" v-model.trim="state.form.createName" clearable></el-input>
              </el-col>
              <el-button type="success" :icon = "Plus" round @click="outStoreAdd" >OutStore</el-button>
              <!-- <el-button type="success" :icon = "Edit" round @click="outStoreModify" >Modify</el-button> -->
              <el-button type="warning" :icon = "Refresh" round @click="reset">Reset</el-button>
            </el-row>
          </el-card>
          <el-row :gutter="20" class="el_row">
            <el-col :span="6">
              <el-input placeholder="请输入要删除或查找的出库单号" v-model.trim="state.delorget.outId" clearable></el-input>
            </el-col>
            <el-button type="danger" :icon="Delete" @click="outStoreDel">Delete</el-button>
            <el-button type="primary" :icon="Search" @click="outStoreGet">Search</el-button>
          </el-row>
          <el-table :data="state.tableData" stripe style="width: 100%">
            <el-table-column :prop="item.prop" :label="item.label" v-for="(item, index) in options" :key="index">
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  
  </template>